<template>
    <div>
        <Button type="primary" @click="showCreate = true, isUpdate = false">新建</Button>
        <Button type="primary" @click="showCreate = true, isUpdate = true, name = oldName, sort = oldSort">修改</Button>
        <Button type="primary" @click="deleteCatalog">删除</Button>
        <Divider/>
        <Table
                highlight-row
                @on-current-change="onCurrentChange"
                :columns="columns"
                :data="data">

        </Table>

        <Modal
                v-model="showCreate"
                title="Common Modal dialog box title"
                @on-ok="createOrUpdateCatalog"
                @on-cancel="cancel">
            栏目名称：
            <Input v-model="name" placeholder="栏目名称..."/>
            栏目排序：
            <Input v-model="sort" type="number" value="10000"/>
        </Modal>
    </div>
</template>

<script>
    export default {
        name: "CatalogManage",
        components: {},
        data() {
            return {
                showCreate: false,
                columns: [
                    {
                        title: '栏目主键',
                        key: 'bId'
                    },
                    {
                        title: '栏目名称',
                        key: 'name'
                    }
                ],
                data: [
                    {
                        bId: 18,
                        name: 'John Brown',
                        bId: 18,
                    },
                    {
                        bId: 18,
                        name: 'John Brown',
                        bId: 18,
                    },
                    {
                        bId: 18,
                        name: 'John Brown',
                        bId: 18,
                    }
                ],
                oldName: "",
                name: "",
                oldSort: "",
                sort: "10000",
                selectRow: "",
                isUpdate: false
            }
        },
        methods: {
            listCatalog() {
                this.$http({
                    method: 'post',
                    url: this.apiBase + '/blog/catalog/list',
                    data: {}
                })
                    .then(response => {
                        this.data = response.data.data.catalogs;
                    })
                    .catch(error => {
                        console.log(error);
                    })
            },

            createOrUpdateCatalog() {
                if (this.isUpdate) {
                    this.updateCatalog();
                } else {
                    this.createCatalog();
                }
            },

            createCatalog() {
                this.$http({
                    method: 'post',
                    url: this.apiBase + '/blog/catalog/create',
                    data: {
                        name: this.name,
                        sort: this.sort
                    }
                })
                    .then(response => {
                        if (response.data.code == 200) {
                            this.$Message.info("新建栏目成功");
                            this.name = "";
                            this.sort = "10000";
                            this.listCatalog();
                        } else {
                            this.$Message.error("新建栏目失败");
                            this.listCatalog();
                        }
                    })
                    .catch(error => {
                        console.log(error);
                    })
            },

            deleteCatalog() {
                this.$http({
                    method: 'get',
                    url: this.apiBase + '/blog/catalog/delete/' + this.selectRow,
                    data: {}
                })
                    .then(response => {
                        if (response.data.code == 200) {
                            this.$Message.info("删除栏目成功");
                            this.listCatalog();
                        } else {
                            this.$Message.error("删除栏目失败");
                            this.listCatalog();
                        }
                    })
                    .catch(error => {
                        console.log(error);
                    })
            },

            updateCatalog() {
                this.$http({
                    method: 'post',
                    url: this.apiBase + '/blog/catalog/update',
                    data: {
                        name: this.name,
                        sort: this.sort
                    }
                })
                    .then(response => {
                        if (response.data.code == 200) {
                            this.$Message.info("更新栏目成功");
                            this.name = "";
                            this.sort = "10000";
                            this.listCatalog();
                        } else {
                            this.$Message.error("更新栏目失败");
                            this.listCatalog();
                        }
                    })
                    .catch(error => {
                        console.log(error);
                    })
            },
            onCurrentChange(currentRow, oldCurrentRow) {
                this.selectRow = currentRow.bId;
                this.oldName = currentRow.name;
                this.oldSort = currentRow.sort;
            },
            cancel() {
                this.name = "";
                this.sort = "10000";
            }
        },
        created() {
            this.listCatalog();
        }
    }
</script>

<style scoped>

</style>